<template>
  <div class="flex-x al-start">
    <div class="left-menu">
      <div class="menu-title">{{ menTitle }}</div>
      <template v-for="(item, index) in menuList">
        <nav
          :class="`menu-list ${nowMenu == index ? 'menu-checked' : ''}`"
          :key="index"
          @click="changePage(index)"
        >
          <div class="icon-box">
            <i
              :class="`iconfont ${item.icon} ${
                nowMenu == index ? 'font-16 font-w-600' : 'font-14'
              }`"
            ></i>
          </div>
          <span>{{ item.name }}</span>
        </nav>
      </template>
    </div>
  </div>
</template>
<script>

export default {
  name: 'document-nav-bar',
  props: {
    nowMenu: {
      type: Number,
      default: 0,
    },
  },
  inject: ['initData'],
  provide() {
    return {
      initData: this.initData,
    };
  },
  data() {
    return {
      menuList: [
        {
          name: '知识库设置',
          icon: 'icon-wendangkuleibie',
          comName: 'document-set',
        }
      ],
      menTitle: '信息管理'
    };
  },
  methods: {
    changePage(index) {
      if (this.nowMenu === index) {
        return;
      }
      // if (index === 0) {
      //   window.location.href = '';
      // }
    },
  }
};
</script>
<style lang="scss">
.al-start {
  align-items: flex-start;
}
.flex-1 {
  flex: 1;
}
.mar-b-12 {
  margin-bottom: 12px;
}
.mar-r-12 {
  margin-right: 12px;
}
.font-12 {
  font-size: 12px;
}
.font-14 {
  font-size: 14px;
}
.font-16 {
  font-size: 16px;
}
.al-c {
  align-items: center !important;
}
label {
  margin-bottom: 0;
}
::-webkit-scrollbar-track {
  background: transparent;
}
img {
  width: 100%;
  height: 100%;
}
.flex-x {
  display: flex;
  .left-menu {
    display: none;
    width: 25%;
    min-width: 200px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
    max-width: 400px;
    .menu-title {
      font-size: 18px;
      color: #454648;
      padding: 10px;
      font-weight: 600;
    }
    .menu-list {
      border-left: 3px solid transparent;
      border-top: 1px solid #f4f4f4;
      padding: 10px 15px;
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: rgb(246, 246, 246);
      }
      span {
        font-size: 12px;
      }
      .left-border {
        height: 100%;
        width: 3px;
        position: absolute;
        left: 0;
        background: #55b7b4;
        top: 0;
      }
      .icon-box {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        margin-right: 13px;
      }
    }
    .menu-checked {
      border-left: 3px solid $color-primary-light-6;
      &:hover {
        background: #fff;
      }
      span {
        font-size: 13px;
        font-weight: 500;
      }
    }
  }
}
</style>
